<template>
	<view style="warapper">
		<u-toast ref="uToast" /><u-no-network></u-no-network>
		<u-navbar title="客户目录" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>

		<view class="search-input">
			<u-search v-model="keyword" @custom="goSearch" :clearabled="false" placeholder="请输入标题关键词" height="40"
				bg-color="#fff;" placeholder-color="#A2A6AC"
				:action-style="{width:'130rpx',height:'80rpx',background:'#2A8FFC','border-radius':'25px','margin':'0 20rpx','font-size':'28rpx',color:'#fff','line-height':'80rpx','text-align':'center'}"></u-search>
		</view>

		<view class="catlog-tabs">
			<!-- 第一层tab -->
			<view class="cat-tab" v-for="(item, index) in tabDatas" @click="handleCatClick(item, index)"
				:key="item.text">
				<view class="text">{{item.text}}</view>
				<!-- 暂时先写死1 后续获取 我的客户列表数据 -->
				<view class="count" v-show="item.api == 'GetGLKH'">{{1}}</view>
			</view>
			<view class="tab-bar" :style="{transform: `translate(${40 + (currTabIndex * 190)}rpx);`}"></view>
		</view>

		<!-- 第二层 多选的tab -->
		<view class="catlog-multiple-tabs">
			<template v-for="(item, index) in tabObjList[tabDatas[currTabIndex].api]">
				<view class="cat-tab" v-if="index" @click="handleMutipleClick(item)" :key="item.text">
					<view class="text"
						:class="{active: item.list.findIndex(findItem => findItem.val == curMultipleIdx[item.key]) != -1}">
						{{item.text}}
					</view>
				</view>
			</template>
		</view>

		<!-- 第二层多选tab的展示列表 pop -->
		<view class="pop-list" v-if="currClientList.length && isPop">
			<template v-for="(item, index) in currClientList">
				<view class="pop-item" :key="index" @click="handlePopClick(item)">
					{{item.text}}
					<image v-show="item.val == curMultipleIdx[currKey]" src="/static/images/duihao.png"
						style="width: 16px;height: 16px;" alt="" />
				</view>
			</template>
		</view>

		<!-- 真正展示的区域 -->
		<view class="list">
			<template v-for="item in clientList">
				<view class="card" :key="item.ID">

				</view>
			</template>
		</view>

		<view class="add-icon-card" @click="handleAdd">
			<view class="add">
				+
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabDatas: [{
						text: '我的客户',
						api: 'GetGLKH'
					},
					{
						text: '公海客户',
						api: 'GetGHGLKH'
					},
					{
						text: '客户联系人',
						api: 'GetKHLXR'
					},
					{
						text: '下属客户',
						api: 'GetSubSSXJRY'
					}
				],
				tabObjList: {
					GetGLKH: [{
						api: 'GetGLKH',
					}],
					GetSubSSXJRY: [{
							api: 'GetXSGLKH'
						},
						{
							text: '下属',
							list: []
						},
						{
							text: '查看机构',
							list: []
						}
					]
				},
				currTabIndex: 0,
				curMultipleIdx: {},
				clientList: [],
				currClientList: [],
				currKey: '',
				isPop: false
			}
		},
		onLoad() {
			const commonList = [{
					text: '客户类型',
					key: 'KHLX',
					list: [{
							text: '餐饮设备供应商',
							val: 811
						},
						{
							text: '已合作客户',
							val: 111
						},
						{
							text: '饮品咖啡类客户',
							val: 711
						}, {
							text: '小吃类客户',
							val: 611
						}
					]
				},
				{
					text: '意向程度',
					key: 'YXCD',
					list: [{
							text: '已通过微信',
							val: 7
						},
						{
							text: '测试客户',
							val: 4
						},
					]
				}
			];
			this.$set(this.tabObjList, 'GetGLKH', [...this.tabObjList.GetGLKH, ...commonList]);
			const newGetSubSSXJRY = [...this.tabObjList.GetSubSSXJRY]
			newGetSubSSXJRY.splice(2, 0, ...commonList)
			this.$set(this.tabObjList, 'GetSubSSXJRY', newGetSubSSXJRY)

			this.handleGetClientList()
		},
		methods: {
			handleGetClientList() {
				this.clientList = [{
					KHLXR: {
						AddAcc: "15557167200",
						AddAccName: "林海广",
						AddIP: "36.24.127.68",
						AddTime: "2024-06-25T17:40:29.23",
						ChgAcc: "15557167200",
						ChgAccName: "林海广",
						ChgIP: "36.24.127.68",
						ChgTime: "2024-06-25T17:40:29.23",
						Deleted: "0",
						ID: "306CBE30EBDC40D3A199B7B7CC6C1D2B",
						IsNull: false,
						KHID: "6F6EE10D5B4F4AE3B675B8959D8FDB17",
						LXDH: "15557167201",
						NGS: "测试",
						NGSBM: "",
						NGSZW: "测试",
						OGS: "测试",
						OGSBM: "",
						OGSZW: "测试",
						XB: "0",
						XM: "测试",
						YWYID: "BF19F8A6C4F8421BAFB8121A6F17EF49"
					},
					index: "C"
				}]
			},
			handleCatClick(val, idx) {
				this.currTabIndex = idx
				this.currClientList = []
				this.curMultipleIdx = {}


			},
			handleMutipleClick(val) {
				this.currKey = val.key
				console.log(val);
				if (val.list.length > 0) {
					this.isPop = true
					this.currClientList = val.list
				} else {
					this.currClientList = []
				}
				console.log(this.currClientList);
			},
			handleAdd() {
				uni.navigateTo({
					url: '/pages/member/agent/addClient/addClient'
				})
			},
			handlePopClick({
				val
			}) {
				if (this.curMultipleIdx[this.currKey] === val) {
					this.$set(this.curMultipleIdx, this.currKey, nu)
				} else {
					this.$set(this.curMultipleIdx, this.currKey, val)
				}
				// 接口请求数据
				this.isPop = false
				console.log(this.curMultipleIdx);
			}
		},
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background: #F1F1F5;
	}
</style>

<style scoped lang="scss">
	.wrapper {
		display: flex;
		flex-direction: column;
		position: relative;
		width: 100%;
		height: 100%;
	}

	.search-input {
		padding: 30rpx 40rpx 20rpx;
	}

	.catlog-multiple-tabs,
	.catlog-tabs {
		display: flex;
		align-items: center;
		font-size: 14px;

		.cat-tab {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 40px;

			.text,
			.count {
				height: 100%;
				line-height: 40px;
				border: 1px solid transparent;
			}
		}
	}

	.catlog-tabs {
		position: relative;

		.cat-tab {
			color: #7A808A;
		}

		.tab-bar {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 64px;
			height: 2px;
			transition-duration: 0.5s;
			background-color: #2A8FFC;
			transform: translateX(40rpx);
			opacity: 1;
			border-radius: 1px;
		}
	}

	.catlog-multiple-tabs {
		background-color: #fff;

		.cat-tab {
			color: #606266;
		}
	}

	.list {
		display: flex;
		flex: 1;
		overflow-y: scroll;
	}

	.add-icon-card {
		position: fixed;
		right: 40rpx;
		bottom: 80rpx;
		width: 80rpx;
		height: 80rpx;
		background-color: #2A8FFC;
		border-radius: 50%;
		text-align: center;
		line-height: 80rpx;

		.add {
			font-size: 34rpx;
			font-weight: 600;
			color: #fff;
		}
	}

	.pop-list {
		position: absolute;
		top: 430rpx;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		padding: 0 30rpx;
		background-color: #fff;

		.pop-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 90rpx;
			border-bottom: 1px solid #e4e5e7;
			color: #606266;
		}

		.popActive {
			color: #2A8FFC;
		}

		.pop-item:last-child {
			border-bottom: none;
		}
	}

	.active {
		border-bottom: 2px solid #2A8FFC !important;
	}
</style>